<template>
  <el-dialog title="附件预览" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
    :modal-append-to-body="false" append-to-body v-drag2anywhere>
    <div style="display: flex;">
      <div v-for="(item,index) in list" :key="index" @click="handleSelect(index)">
        <img v-if="item.type.indexOf('image')!=-1" :title="item.name" :src="item.url"
          style="cursor:pointer;width: 30px; height:30px;padding: 2px;" :class="cur==index?'selected':'unselected'" />
        <img v-if="item.type.indexOf('pdf')!=-1" :title="item.name" src="../assets/images/icon_pdf.jpg"
          style="cursor:pointer;width: 30px; height:30px;padding: 2px;" :class="cur==index?'selected':'unselected'" />
      </div>
      <div style="position: absolute;right:0px; right:20px;" v-if="curdata.type.indexOf('image')!=-1">
        <el-button-group>
          <el-button icon="el-icon-refresh-left" size="mini" title="向左旋转90度" circle @click="handleRotate(-1)"></el-button>
          <el-button icon="el-icon-refresh" size="mini"  title="重置" circle @click="handleRotate(0)"></el-button>
          <el-button icon="el-icon-refresh-right" size="mini" title="向右旋转90度" circle @click="handleRotate(1)"></el-button>
        </el-button-group>
      </div>
    </div>
    <div style="width: 100%; height:700px;border:1px solid #dcdcdc;background-color: #EEEEEE; text-align: center;box-sizing: border-box;">
      <div class="img_box" v-if="curdata.type.indexOf('image')!=-1">
        <img id="img_container" :src="curdata.url" height="100%"  :title="curdata.name"/>
      </div>
      <div style="width: 100%; height:100%;border:1px solid #dcdcdc;background-color: #EEEEEE; text-align: center;"
        v-if="curdata.type.indexOf('pdf')!=-1">
        <iframe ref="pdfiframe" width="100%" height="100%" :src="axios.default.pdfViewerURL+'?file='+curdata.url"
          mozallowfullscreen="true" allowfullscreen="true" webkitallowfullscreen="true" oallowfullscreen="true"
          msallowfullscreen="true"></iframe>
      </div>
    </div>
  </el-dialog>

</template>

<script>
  export default {
    components: {},
    data() {
      return {
        cur: 0,
        curdata: {
          id: '',
          name: '',
          type: '',
          url: ''
        },
        rotateNum:0,
        rotateAngle: 0,
        list: [],
        dialogVisible: false
      }
    },
    methods: {
      initData(list) {
        this.rotateNum=0;
        this.list = list;
        if (this.list.length > 0) {
          this.cur = 0;
          this.curdata = this.list[this.cur];
        } else {
          this.cur = -1;
          this.curdata = null;
        }
      },
      handleRotate(act) {
        this.rotateNum=this.rotateNum+1;
        if(act==0){
          this.rotateNum=0;
        }
        var box=document.getElementById("img_container");
        box.style.transform = 'rotate(' + 90 * this.rotateNum + 'deg)';
      },
      handleSelect(index) {
        this.rotateAngle = 0;
        this.cur = index;
        this.curdata = {};
        this.curdata = this.list[this.cur];
      }
    }
  }
</script>
<style scoped>
  .unselected {
    border: 1px solid #c8c8c8;
    margin-left: 2px;
  }

  .selected {
    border: 1px solid #646464;
    margin-left: 2px;
  }

  .img_box{
    width: 100%;
    height: 100%;
    position: relative;
  }

  .img_box img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  .rotateR {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }
</style>
